<template>
  <div class="animated fadeIn">
    <!-- 所有运单 2018/3/5 11:12  -->
    <Row>
      <i-col :md="24">
        <div>
          <!--
          <div id="container" style="margin-bottom:10px;">

              <Button type="primary" size="large" icon="ios-cloud-upload-outline" id='pickfiles' @click="qiniu_upload" style="padding-bottom:5px;">上传文件</Button>
              <Progress :percent="progresscount" :status="progresstatus" style="width=90%;vertical-align:middle" v-if="progresshow">
                  <Icon type="checkmark-circled" v-if="progresscount==100"></Icon>
                  <span v-if="progresscount===100">上传成功</span>
                  <Icon type="close-circled" v-if="progresstatus==='wrong'"></Icon>
                  <span v-if="progresstatus==='wrong'">上传失败</span>
                  <span style="position:absolute;left:50%;top:-5px;" v-if="progresscount!==0&&progresscount!=100">{{progressspeed}}</span>
              </Progress>
          </div>
        -->
          <Row>
            <!-- <Input v-model="searchConName" placeholder="请输入姓名搜搜..." style="width: 200px" icon="search" @on-change="handleSearch"/> -->
            <Select v-model="main_order_list" filterable placeholder="请输入联运单号" style="width: 200px">
              <Option v-for="item in main_order_list" :value="item.orderNo" :key="item.orderNo">{{ item.orderNo }}</Option>
            </Select>
            <!--
            <span @click="handleSearch" style="margin: 0 10px;"><Button type="primary" icon="search">搜索</Button></span>
          -->
            <Button @click="handleCancel" type="ghost">取消</Button>
          </Row>


          <div style="position:relative;">

            <Table :columns="columns7" :data="main_order_list" ref="table" border></Table>

            <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                                      align-items: center;
                                      justify-content: center;background: rgba(210, 216, 222, 0.5);"
                 v-if="list_loadding">
              <Spin size="large"></Spin>
              <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
            </div>
          </div>

          <Page :total="this.pageTotal" show-total @on-change="setInitPage"
                style="text-align:right;margin-top:50px">
          </Page>
        </div>
      </i-col>
      <i-col :md="12">
      </i-col>
    </Row>
    <Modal v-model="detailModel" title="运单详情">
      <Table :columns="column1" :data="detailData"></Table>
    </Modal>

  </div>
</template>
<script>
  import { getMainOrder, getOrderDetail } from '@api/backEnd/mainOrder'

  export default {
    name: 'allorders',
    data () {
      return {
        detailModel: false,
        progresshow: false,
        searchColumn: '',
        progresscount: 0,
        progresstatus: 'active',
        progressspeed: 0,
        searchConName: '',
        pageindex: 1,
        pageTotal: null,
        main_order_list: [],
        detailData: [],
        init_main_data: [],
        loading: false,
        list_loadding: false,
        columns7: [
          {
            title: '联运单号',
            key: 'orderNo',
            ellipsis: 'false',
            fixed: 'left',
            width: 200,
            render: (h, params) => {
              let shipper = params.row.orderNo
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '空车入线时间',
            ellipsis: 'false',
            key: 'emptyTime',
            width: 150,
            render: (h, params) => {
              let shipper = params.row.emptyTime
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '起始站',
            ellipsis: 'false',
            key: 'startStationName',
            width: 100,
            render: (h, params) => {
              let shipper = params.row.startStationName
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '起始站出发时间',
            ellipsis: 'false',
            key: 'startStationTime',
            width: 150,
            render: (h, params) => {
              let shipper = params.row.startStationTime
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '终点站',
            ellipsis: 'false',
            key: 'endStationName',
            width: 100,
            render: (h, params) => {
              let shipper = params.row.endStationName
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '到达终点站时间',
            ellipsis: 'false',
            key: 'endStationTime',
            width: 150,
            render: (h, params) => {
              let shipper = params.row.endStationTime
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '托运人',
            ellipsis: 'false',
            key: 'shipper',
            width: 150,
            render: (h, params) => {
              let shipper = params.row.shipper
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '收货人',
            ellipsis: 'false',
            key: 'receiver',
            width: 150,
            render: (h, params) => {
              let receiver = params.row.receiver
              return h('Poptip', {
                props: {
                  content: receiver,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, receiver)
            }
          }, {
            title: '创建时间',
            key: 'createTime',
            width: 200,
            sortable: true,
            sortType: 'desc',
            render: (h, params) => {
              let shipper = params.row.createTime
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '运单状态',
            ellipsis: 'false',
            width: 130,
            key: 'status',
            render: (h, params) => {
              const status = parseInt(params.row.status)
              if (status === 1) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'default'
                    }
                  }, '空车入线')
                ])
              } else if (status === 2) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'blue'
                    }
                  }, '重车出线')
                ])
              } else if (status === 3) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'yellow'
                    }
                  }, '待运输')
                ])
              } else if (status === 4) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'green'
                    }
                  }, '运输中')
                ])
              } else if (status === 5) {
                return h('div', [

                  h('Tag', {
                    props: {
                      type: 'dot'
                    }
                  }, '配送中')
                ])
              } else if (status === 6) {
                return h('div', [
                  h('Tag', {
                    props: {
                      type: 'dot',
                      color: 'red'
                    }
                  }, '运单完成')
                ])
              }
            }
          }, {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 200,
            ellipsis: 'true',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: (value, row) => {
                      this.detailModel = true
                      getOrderDetail(params.row).then(res => {
                        if (res.data.isSuccess === 1) {
                          this.detailData = res.data.data.sub
                        }
                      })
                    }
                  }
                }, '查看详情')
              ])
            }
          }
        ],
        column1: [
          {
            title: '联运单号',
            ellipsis: 'false',
            key: 'mainOrderNo',
            render: (h, params) => {
              let shipper = params.row.mainOrderNo
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '联运子单号',
            ellipsis: 'false',
            key: 'orderNo',
            render: (h, params) => {
              let shipper = params.row.orderNo
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '车号',
            ellipsis: 'false',
            key: 'trainNumber',
            render: (h, params) => {
              let shipper = params.row.trainNumber
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '车队名称',
            ellipsis: 'false',
            key: 'fleetName',
            render: (h, params) => {
              let shipper = params.row.fleetName
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '司机名称',
            ellipsis: 'false',
            key: 'driverName',
            render: (h, params) => {
              let shipper = params.row.driverName
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '托运人',
            ellipsis: 'false',
            key: 'shipper',
            render: (h, params) => {
              let shipper = params.row.shipper
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }, {
            title: '收货人',
            ellipsis: 'false',
            key: 'receiver',
            render: (h, params) => {
              let shipper = params.row.receiver
              return h('Poptip', {
                props: {
                  content: shipper,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shipper)
            }
          }

        ]
      }
    },
    methods: {
      search (data, argumentObj) {
        let res = data
        let dataClone = data
        for (let argu in argumentObj) {
          if (argumentObj[argu].length > 0) {
            res = dataClone.filter(d => {
              return d[argu].indexOf(argumentObj[argu] > -1)
            })
            dataClone = res
          }
        }
      },
      handleSearch () {
        this.main_order_list = this.search(this.init_main_data, { orderNo: this.searchColum })
      },
      handleCancel () {
      },
      setInitPage (page) {
        // const status = 6
        const param = { page }
        getMainOrder(param).then(res => {
          if (res.data.isSuccess === 1) {
            let mainOrderList = res.data.data.list
            mainOrderList.sort(function (p1, p2) {
              return new Date(p1.createTime).getTime() - new Date(p2.createTime).getTime()
            })
            this.main_order_list = mainOrderList.reverse()
            this.init_main_data = res.data.data.list
            this.pageTotal = res.data.data.total
          } else {
            this.pageTotal = 0
          }
        })
        this.pageindex = page
      },
      exportData (type) {
        if (type === 1) {
          this.$refs.table.exportCsv({
            filename: '原始数据',
            columns: this.columns7,
            data: this.video_list
          })
        } else if (type === 2) {
          this.$refs.table.exportCsv({
            filename: '排序和过滤后的数据',
            original: false
          })
        }
      }
    },
    mounted () {
      const vue = this
      this.list_loadding = true
      setTimeout(function () {
        vue.list_loadding = false
      }, 2000)
      this.setInitPage(1)
    }
  }
</script>
